ASP.Net এ ফর্ম তৈরি এবং সাবমিট করা একটি গুরুত্বপূর্ণ বিষয়, যা ব্যবহারকারীর ইনপুট সংগ্রহ এবং সেগুলিকে সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনগুলিতে ফর্ম তৈরি করা এবং ডেটা সাবমিট করার জন্য Razor এবং HTML ফর্ম ট্যাগ ব্যবহার করা হয়। এই টিউটোরিয়ালে আমরা ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনে ফর্ম তৈরি এবং সাবমিট করার ধাপগুলো দেখাব।

১. ASP.Net MVC ফর্ম তৈরি এবং সাবমিট করা

Controller - Data Handling

প্রথমে আপনাকে Controller এ ডেটা হ্যান্ডলিং করতে হবে। আমরা একটি সাধারণ Product মডেল ব্যবহার করবো।

public class ProductController : Controller
{
    // GET: Product/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: Product/Create
    [HttpPost]
    public IActionResult Create(Product model)
    {
        if (ModelState.IsValid)
        {
            // প্রোডাক্ট ডেটা প্রক্রিয়া করুন (যেমন ডাটাবেসে সেভ করা)
            return RedirectToAction("Index"); // Index ভিউতে রিডিরেক্ট করা
        }

        return View(model); // মডেলটি পুনরায় ভিউতে পাঠানো হচ্ছে যদি ভ্যালিডেশন ব্যর্থ হয়
    }
}

এখানে, Create অ্যাকশনটি GET এবং POST উভয় রিকোয়েস্টকে হ্যান্ডল করছে। GET রিকোয়েস্টে ফর্ম পেজ দেখানো হচ্ছে এবং POST রিকোয়েস্টে ডেটা প্রক্রিয়া করা হচ্ছে।

Model - Product

public class Product
{
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Range(1, 10000, ErrorMessage = "Price must be between 1 and 10000")]
    public decimal Price { get; set; }
}

এখানে, Product মডেলটিতে Name এবং Price প্রপার্টি রয়েছে এবং Price এর জন্য একটি Range ভ্যালিডেশন অ্যাট্রিবিউটও আছে।

View - Create.cshtml (Razor View)

@model YourNamespace.Models.Product

<form method="post">
    <div>
        <label for="Name">Product Name:</label>
        <input type="text" id="Name" name="Name" value="@Model.Name" />
        @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div>
        <label for="Price">Price:</label>
        <input type="text" id="Price" name="Price" value="@Model.Price" />
        @Html.ValidationMessageFor(model => model.Price)
    </div>
    <button type="submit">Submit</button>
</form>

@Html.ValidationSummary(true)

এখানে, @Html.ValidationMessageFor এবং @Html.ValidationSummary ব্যবহার করা হয়েছে যাতে ভ্যালিডেশন ত্রুটি দেখানো যায়। এছাড়াও, POST রিকোয়েস্টে ফর্মটি সাবমিট হবে।

২. ASP.Net Core MVC ফর্ম তৈরি এবং সাবমিট করা

ASP.Net Core MVC তে ফর্ম তৈরি এবং সাবমিট করার জন্য প্রায় একই রকম পদ্ধতি অনুসরণ করা হয়, তবে কিছু পার্থক্য থাকতে পারে যেমন Tag Helpers এর ব্যবহার।

Controller - Data Handling

public class ProductController : Controller
{
    // GET: Product/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: Product/Create
    [HttpPost]
    public IActionResult Create(Product model)
    {
        if (ModelState.IsValid)
        {
            // প্রোডাক্ট ডেটা প্রক্রিয়া করুন (যেমন ডাটাবেসে সেভ করা)
            return RedirectToAction("Index");
        }

        return View(model);
    }
}

এখানে GET এবং POST অ্যাকশন দুটি একদমই পূর্বের মতো কাজ করছে। Product মডেলটি POST রিকোয়েস্টে হ্যান্ডেল হচ্ছে।

Model - Product

public class Product
{
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Range(1, 10000, ErrorMessage = "Price must be between 1 and 10000")]
    public decimal Price { get; set; }
}

Product মডেলটি ASP.Net Core MVC তে ভ্যালিডেশন সহ একই রকম থাকবে।

View - Create.cshtml (Razor View)

ASP.Net Core MVC তে Tag Helpers ব্যবহার করা হয় যা Razor ফর্ম তৈরির জন্য সহজ এবং সহজবোধ্য উপায় প্রদান করে।

@model YourNamespace.Models.Product

<form asp-action="Create" method="post">
    <div>
        <label for="Name">Product Name:</label>
        <input asp-for="Name" id="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div>
        <label for="Price">Price:</label>
        <input asp-for="Price" id="Price" class="form-control" />
        <span asp-validation-for="Price" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

@Html.ValidationSummary(true)

এখানে:

• asp-for: এটি মডেল প্রপার্টির সাথে ইনপুট ফিল্ডটি সংযুক্ত করে।
• asp-validation-for: এটি সেই ইনপুটের জন্য ভ্যালিডেশন ত্রুটি দেখায়।
• asp-action: এটি ফর্মের সাবমিট অ্যাকশন সেট করে, যেমন Create অ্যাকশন।

৩. জাভাস্ক্রিপ্ট এবং AJAX এর মাধ্যমে ফর্ম সাবমিট

আপনি চাইলে ফর্ম সাবমিট করার জন্য AJAX ব্যবহার করতে পারেন, যাতে পেজ রিলোড না হয়। এটি সাধারণত ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।

AJAX ফর্ম সাবমিট

<form id="productForm">
    <div>
        <label for="Name">Product Name:</label>
        <input type="text" id="Name" name="Name" />
    </div>
    <div>
        <label for="Price">Price:</label>
        <input type="text" id="Price" name="Price" />
    </div>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
    function submitForm() {
        var formData = {
            Name: $('#Name').val(),
            Price: $('#Price').val()
        };

        $.ajax({
            type: 'POST',
            url: '/Product/Create',
            data: formData,
            success: function(response) {
                alert('Product created successfully!');
            },
            error: function() {
                alert('Error in form submission');
            }
        });
    }
</script>

এখানে, submitForm() ফাংশনটি AJAX রিকোয়েস্টের মাধ্যমে ফর্মের ডেটা সাবমিট করবে, এবং কোনো পেজ রিলোড ছাড়াই ব্যবহারকারীকে রেসপন্স দেখাবে।

সারাংশ

ASP.Net এবং ASP.Net Core MVC তে ফর্ম তৈরি এবং সাবমিট করার জন্য আমরা Model, View, এবং Controller এর মধ্যে ইন্টারঅ্যাকশন ব্যবহার করি। GET রিকোয়েস্টে ফর্মটি প্রদর্শন করা হয় এবং POST রিকোয়েস্টে ডেটা প্রক্রিয়া করা হয়। AJAX ব্যবহারের মাধ্যমে ফর্ম সাবমিট করা যেতে পারে, যা পেজ রিলোড ছাড়াই ডেটা সাবমিট করতে সাহায্য করে।